import React, { Component } from 'react';

import { TabBar,List } from 'antd-mobile';
import { AppOutline, BillOutline, UnorderedListOutline, ShopbagOutline, PayCircleOutline, SetOutline} from 'antd-mobile-icons';

import '../../styles/user.css'

class User extends Component {
    constructor(props) {
        super(props);
        this.state = {
            token:localStorage.getItem('token'),
            pic:localStorage.getItem('pic'),
            tabs: [
                {
                    key: '/index/homejsx',
                    title: '待付款',
                    icon: <AppOutline />,
                },
                {
                    key: '/index/myclass',
                    title: '代发货',
                    icon: <BillOutline />,
                },
                {
                    key: '/index/allshop',
                    title: '已发货',
                    icon: <UnorderedListOutline />,
                },
                {
                    key: '/index/shopcar',
                    title: '待评价',
                    icon: <ShopbagOutline />,
                },
            ],
        }
    }
    // 点击登录
    goLogin() {
        this.props.history.push('/login')
    }
    // 点击收藏
    goCollect() {
        this.props.history.push('/favorite')
    }
    render() {
        console.log(this.state.token);
        return (
            <div className='mine'>
                <div className='minetop'>
                    <img src={this.state.pic} alt="" />
                    <div onClick={()=>{this.goLogin()}}>
                    {this.state.token? localStorage.getItem('name'):"登录/注册"}
                    </div>
                </div>
                <div className='box1'>
                    <div onClick={()=>{this.goCollect()}}>收藏</div>
                    <div>积分</div>
                    <div>优惠卷</div>
                </div>
                <div className='box2'>
                    <div className='box2_1'>
                        <span>我的订单</span>
                        <span>查看全部订单 </span>
                    </div>
                    <TabBar activeKey={this.state.activeKey} onChange={(key) => { this.changeTabbar(key) }}>
                        {
                            this.state.tabs.map(item => (
                                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                            )
                            )}
                    </TabBar>
                </div>
                <div className='listbox'>
                <List>
                    <List.Item prefix={<UnorderedListOutline />} onClick={() => { }}>
                        会员中心
                    </List.Item>
                    <List.Item prefix={<PayCircleOutline />} onClick={() => { }}>
                        领卷中心
                    </List.Item>
                    <List.Item prefix={<SetOutline />} onClick={() => { }}>
                        我的评价
                    </List.Item>
                    <List.Item prefix={<SetOutline />} onClick={() => { }}>
                        收货地址
                    </List.Item>
                    <List.Item prefix={<SetOutline />} onClick={() => { }}>
                        我的客服
                    </List.Item>
                </List>
                </div>

            </div>
        );
    }
}

export default User;